<template>
  <div class="xbotRobot">
    <div class="top">
      <img :src="require('../../assets/img/robotRight.png')" alt="" class="fr">
      <img :src="require('../../assets/img/robotLeft.png')" alt="" class="fl">
      <img :src="xbotLogo" alt="" class="log">
      <h4>第三代智能客服机器人——让智能服务变得更简单</h4>
      <el-button type="primary" size="mini" @click="enterXbot">进入机器人后台</el-button>
    </div>
    <div>
      <ul class="clearfix" style="paddingLeft: 20px">
        <li class="content fl" v-for="(item, index) in contentArr" :key="index"
         :style="`height: ${index > 2 ? '200px' : '230px'};background: url(${item.img}) no-repeat 16px 28px/25% `">
          <div class="contentTop">
            <h5>{{item.title}}</h5>
            <p>{{item.content}}</p>
          </div>
          <ul class="clearfix">
            <li class="listItem" v-for="(listItem, listIndex) in item.list" :key="listIndex">
              {{listItem}}
            </li>
          </ul>
        </li>
      </ul>
    </div>
    <form  name="xbotSubmit" :action="xbotUrl" method="post" style="display:none;" target="_blank">
      <input type="text" v-for="(val, key, index) in page" :name="key" :value="val" :key="index"><br>
      <input type="submit" value="提交" id="xbotSubmit">
    </form>
  </div>
</template>
<script lang='ts'>
import { Component, Vue } from 'vue-property-decorator'
import { CommonModule } from '@/store/modules/common'
@Component({
  name: 'xbotRobot'
})
export default class XbotRobot extends Vue {
  private xbotLogo = require('../../assets/img/xbotLogo.png')

  private xbotUrl = ''

  private page = []

  private contentArr = [
    {
      title: '降本增效—提升服务效率',
      content: '回复准确率达98%，节省85%人力成本',
      list: [
        '全天候服务，自动理解并回复用户，秒级响应',
        '多场景转人工，实现人机完美过渡',
        '全场景辅助人工客服接待，提升服务效率和专业度',
        '智能问答双引擎，保障机器人语义精准识别'
      ],
      img: require('../../assets/img/xbotContent1.png')
    },
    {
      title: '任务驱动—助力企业业务自助化',
      content: '灵活配置，适用于所有企业业务场景需求',
      list: [
        '便捷可视化的任务流程编辑器，无需开发，学习成本低',
        '多组件任意组合、灵活拖拽，可满足绝大部分业务场景',
        '通过任务型接口，可与企业业务系统实现完美对接 极致提升用户对话体验',
        '多场景、多任务以及知识库之间任意切换'
      ],
      img: require('../../assets/img/xbotContent2.png')
    },
    {
      title: '智能工单—重塑工单新体验',
      content: '颠覆传统工单，提升服务体验',
      list: [
        '与机器人沟通聊天过程中即可创建工单，无需跳转其他页面',
        '颠覆了传统表单填写提交工单的方式',
        '工单创建查询新方式，大大提升服务体验',
        '深度赋能工单，加快工单智慧化转型',
        '对接各种外部工单系统，表单式、问答式多种方式创建工单'
      ],
      img: require('../../assets/img/xbotContent3.png')
    },
    {
      title: '智能运营—助力精准营销与服务',
      content: '丰富的用户画像，千人千面的服务体验',
      list: [
        '智能构建用户画像，识别用户身份，实现一问多答',
        '根据不同用户画像自动推送不同的常见问题和任务会话',
        '千人千面的营销与服务，精准触达用户人群'
      ],
      img: require('../../assets/img/xbotContent4.png')
    },
    {
      title: '金牌话术—辅助提升通话效率',
      content: '智能话务辅助，全面赋能通话',
      list: [
        '自动识别用户问题，实时给电话座席客服推荐答案',
        '金牌话术实时辅助引导座席客服，提升工作效率和专业度',
        '话务辅助知识配置操作简单易用'
      ],
      img: require('../../assets/img/xbotContent5.png')
    },
    {
      title: '营销获客—助力在线智能获客',
      content: '在线精准套电，成功率高达60%',
      list: [
        '在线引导留资，精准套电',
        '真人模拟、无人值守，主动高效接待用户问题',
        '自动化形成商机线索及客户名片，快速分配跟进'
      ],
      img: require('../../assets/img/xbotContent6.png')
    }
  ]

  private contentBgc (index: number) {
    return 'background url("~@assets/img/xbotContent' + (index + 1) + '.png") no-repeat'
  }

  private enterXbot () {
    const actionData = { url: '/im-robot/action/xbot/login', method: 'POST', data: {} }
    CommonModule.publicAction(actionData).then(res => {
      if (res && res.success) {
        this.page = res.dict
        this.xbotUrl = res.dict.xbotUrl
        this.$nextTick(() => {
          (document as any).xbotSubmit.submit()
        })
      }
    })
  }
}
</script>
<style lang="stylus" scoped>
  .xbotRobot
    overflow-y auto
    height 100%
    padding 4px
    .top
      height 180px
      width 100%
      border-radius 10px
      text-align center
      margin-bottom 20px
      background #EEF6FF
      .log
        margin 18px 0px 19px 0px
        height 33px
        width 107px
      h4
        color #767E91
        margin-bottom 24px
    .content
      border 1px solid #E7E9ED
      background-size 25%
      background-position-x 28px
      background-position-y 16px
      border-radius 10px
      width calc(32.32% - 30px)
      margin 0px 15px 20px 15px
      padding 29px 29px 0px
      height 230px
      .contentTop
        height 51px
        border-bottom 1px solid #EBEFF3
        margin-bottom 10px
        h5
          font-size 14px
          color #303753
        p
          color #767E91
      .listItem
        color #767E91
        margin-bottom 12px
</style>
